<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('监控详情')" />
    <style>
        [v-cloak]{
            display: none;
        }
        .bg-card{
            background: #f4f4f4; color:#565656;
            border: 1px solid #c8c8c8;
        }
        .pd-bt-10 {
            padding-bottom:10px;
        }
        .pd-tp-10 {
            padding-top:10px;
        }
        .ibox{
            margin-bottom: 15px
        }
        .calibration{
            width: 15%;
            padding:10px;
            font-weight: bold;
            color:#565656;
            border: 1px solid #c8c8c8;
            text-align: center;
        }
        .calibration {
            font-weight: bold;
        }
        .c-title{
            color: #6e6e6e;
        }
        .valid-value {
            font-size: 20px;font-weight: bold;
            color: #1d70cc;
        }
        .bottom-div{
            width:100%;
            height:50px;
            text-align:center;
            background: #e7eaec;
            position: fixed;
            bottom: 0;
            border-top:1px solid #ccc;
            display:flex;
            flex-direction:row;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body style="background: #f9f9f9;">

<div id="main" v-cloak class="wrapper wrapper-content animated fadeIn" style="max-width: 1000px;margin: 0 auto; background: white;">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>基本信息 <small class="m-l-sm"></small></h5>
                </div>
                <div class="ibox-content">
                    <div class="row" v-if="baseInfo">
                        <div class="col-xs-4">
                           <div class="pd-bt-10">车辆信息：<strong>{{baseInfo.plateNo}}</strong></div>
                           <div class="pd-bt-10">工作日期：<strong>{{baseInfo.workDate}}</strong></div>
                           <div class="pd-bt-10">运输序号：<strong>{{baseInfo.workSequence}}次</strong></div>
                            <div class="pd-bt-10">检测时长：<strong>{{baseInfo.duration}}</strong></div>
                            <div class="pd-bt-10">起始坍落：<span class="valid-value" v-if="baseInfo.slumpStart">{{baseInfo.slumpStart}}mm</span></div>
                        </div>
                        <div class="col-xs-4">
                            <div class="pd-bt-10">开始时间：<strong>{{baseInfo.startTime}}</strong></div>
                            <div class="pd-bt-10">结束时间：<strong>{{baseInfo.endTime}}</strong></div>
                            <div class="pd-bt-10">更新时间：<strong>{{baseInfo.insertTime}}</strong></div>
                            <div class="pd-bt-10">机组编号：<strong>{{baseInfo.machineUnit}}</strong></div>
                            <div class="pd-bt-10">工地坍落：<span class="valid-value" v-if="baseInfo.slumpEnd">{{baseInfo.slumpEnd}}mm</span></div>
                        </div>
                        <div class="col-xs-4">
                            <div class="pd-bt-10">公司名称：<strong>{{baseInfo.companyName}}</strong></div>
                            <div class="pd-bt-10">搅拌站名：<strong>{{baseInfo.mixingStation}}</strong></div>
                            <div class="pd-bt-10">混凝土方量：<strong>{{baseInfo.concreteVolume}}</strong></div>
                            <div class="pd-bt-10">混凝土标号：<strong>{{baseInfo.concreteType}}</strong></div>
                            <div class="pd-bt-10" v-if="baseInfo.slumpStart && baseInfo.slumpEnd">坍落损失：<span class="valid-value">{{baseInfo.slumpStart - baseInfo.slumpEnd}}mm</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox" v-if="detectInfo">
                <div class="ibox-title">
                    <h5>测量信息</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div v-if="detectInfo.calibration" class="col-xs-12" style="display: flex; justify-content: space-around;align-items: center;">
                            <div class="calibration">
                                <div class="pd-bt-10 c-title">标定压力</div>
                                <div>{{detectInfo.calibration.pressure}}</div>
                            </div>
                            <div class="calibration">
                                <div class="pd-bt-10 c-title">标定转速</div>
                                <div>{{detectInfo.calibration.speed}}</div>
                            </div>
                            <div class="calibration">
                                <div class="pd-bt-10 c-title">标定温度</div>
                                <div>{{detectInfo.calibration.temperature}}</div>
                            </div>
                            <div class="calibration">
                                <div class="pd-bt-10 c-title">标定湿度</div>
                                <div>{{detectInfo.calibration.humidity}}</div>
                            </div>
                        </div>
                    </div>

                    <!--表格-->
                    <div class="row" style="padding-top: 20px;">
                        <div class="col-lg-12">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>坍损(mm)</th>
                                    <th>压力均值</th>
                                    <th>转速均值</th>
                                    <th>温度均值</th>
                                    <th>湿度均值</th>
                                    <th>计算方式</th>
                                    <th style="text-align: center">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in detectInfo.calculates" v-bind:key="index">
                                    <td>{{item.insertTime}}</td>
                                    <td>{{item.calcResult}}</td>
                                    <td>{{item.pressure}}</td>
                                    <td>{{item.rotateSpeed}}</td>
                                    <td>{{item.temperature}}</td>
                                    <td>{{item.humidity}}</td>
                                    <td>{{item.groupType}}</td>
                                    <td style="text-align: center;"><a  @click="showDetail(item.id)" class="label label-primary">查看</a></span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--chart -->
    <div class="row" style="padding-top: 20px;">
        <div class="col-lg-12">
            <div class="ibox" >
                <div id="replace-canvas"></div>
                <div id="main-box" style="width: 100%;height: 350px;">
                </div>
            </div>
        </div>
    </div>

</div>

<div style="margin-bottom:40px;width: 100%;height:10px;"></div>
<div class="bottom-div" style="">
    <button onclick="printDetail()" type="button" class="btn btn-success">打印</button>
    <div style="width: 10px;"></div>
    <button onclick="closeSelf()" type="button" class="btn btn-warning">关闭</button>
</div>

<!--原始记录-->
<div id="metaDataDialog" style="display: none;" class="wrapper wrapper-content ibox-content">
    <div class="row" style="padding-top: 20px;">
        <div class="col-lg-12">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>时间</th>
                    <th>压力(Mpa)</th>
                    <th>转速(m/s)</th>
                    <th>温度(℃)</th>
                    <th>湿度</th>
                    <th>标记值</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in messages" v-bind:key="item.msgId">
                    <td>{{item.msgTime}}</td>
                    <td>{{item.pressure}}</td>
                    <td>{{item.rotateSpeed}}</td>
                    <td>{{item.temperature}}</td>
                    <td>{{item.humidity}}</td>
                    <td>{{item.state}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    var prefix = ctx + "device/algorithm"
    var data = [[${data}]];
    var option = {
        title: {
            text: '坍损曲线',
            padding: 15,
            textStyle: {
                fontSize:  14,
                color: '#575454',
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: '20%',
            right: '3%',
            left: '5%',
            bottom: '12%'
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true,
                itemStyle: {
                    color:'#50c962'
                }
            }
        ]
    };

    const dialogApp = new Vue({
        el: '#metaDataDialog',
        data:{
            messages:[]
        },
        methods:{
            setMessages(messages){
                this.messages = messages;
            }
        }
    });
    const app = new Vue({
        el: '#main',
        data:{
            baseInfo: {
                plateNo: '鲁B1C2N9',
                workDate: '2022-04-18',
                workSequence: '01',
                duration: '00:34:21',
                startTime: '2022-04-18 12:12:12',
                endTime: '2022-04-18 12:12:12',
                insertTime: '2022-04-18 12:12:12',
                companyName: '山东精砼',
                mixingStation: '商混站',
                machineUnit: '4号位',
                slumpStart: '50',
                slumpEnd: '40',
                concreteType: 'C11',
                concreteVolume: '5'
            },
            detectInfo: {
                calibration: {
                    pressure:'10.101',
                    speed:'10.101',
                    temperature:'10.101',
                    humidity:'10.101'
                },
                calculates: [
                    {
                        id: 5,
                        insertTime:'2022-04-18 12:12:12',
                        calcResult:10,
                        pressure: '11',
                        rotateSpeed:'11',
                        humidity:'11',
                        temperature:'11',
                        groupType:'A',
                    }
                ]
            },
        },
        created() {
            this.baseInfo = data.baseInfo;
            this.detectInfo = data.detectInfo;
            setTimeout(()=>{
                this.showChart();
            },500);
        },
        methods: {
            showDetail(id) {
                layer.load(2);
                $.get(prefix + '/getMetaData?calcId='+id, res => {
                    if (res.data) {
                        dialogApp.setMessages(res.data);
                    }
                    layer.closeAll();
                    layer.open({
                        title: '检测数据列表',
                        type: 1,
                        area: ['600px', '480px'],
                        content: $('#metaDataDialog'),
                        btn: ['关闭']
                    });
                });
            },
            showChart(){
                let timeArray = [], resArray = [];
                this.detectInfo.calculates.forEach(item =>{
                    timeArray.push(item.insertTime);
                    resArray.push(item.calcResult);
                });
                option.xAxis.data = timeArray;
                option.series[0].data = resArray;

                const myChart = echarts.init(document.getElementById('main-box'));
                myChart.setOption(option);
            }
        },
    });

    function printDetail(){
        var canvas = $("#main-box").find("canvas")[0];
        const width = $("#main-box").width();
        const height = $("#main-box").height();
        var url = canvas.toDataURL('image/png');
        var img = '<img  width="'+width+'" height="'+height+'" src="'+url+'"/>';
        $("#replace-canvas").append(img);
        $("#main-box").remove();
        $("#metaDataDialog").remove();
        document.body.innerHTML = document.getElementById('main').innerHTML;

        layer.load(2);
        setTimeout(() => {
            layer.closeAll();
            window.print();
            location.reload();
        }, 1000);

        return false;
    }
    function closeSelf() {
        window.close();
    }


</script>
</html>